<template>
    <div class="header-content">
        <a href="">
            <div class="menu-list" :style="{backgroundImage: 'url(' + baseImg1+ ')'}">
                <div class="img-title">
                    <span>都江堰市简介</span>
                </div>
                <div class="img-like">
                    <img :src="xin3" alt="">
                </div>
            </div>
        </a>
        <div class="menu-list" :style="{backgroundImage: 'url(' + baseImg2+ ')'}">
            <div class="img-title">
                <span>城市规划</span>
            </div>
            <div class="img-like">
                <img :src="xin3" alt="">
            </div>
        </div>
        <div class="menu-list" :style="{backgroundImage: 'url(' + baseImg3+ ')'}">
            <div class="img-title">
                <span>都江堰市简介</span>
            </div>
            <div class="img-like">
                <img :src="xin3" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Content",
        data(){
            return {
                xin3:'/static/img/xin-3.png',
                baseImg1:'/static/img/shuxi-2.png',
                baseImg2:'/static/img/shuxi-3.png',
                baseImg3:'/static/img/shuxi-4.png'
            }
        }
    }
</script>

<style lang="stylus" type="text/stylus" scoped>
    .header-content
     text-align :center
     .menu-list
       position:relative
       height :4.4rem
       width :9.4rem
       border-radius :.1rem
       background-size: cover;
       margin :.8rem auto
       .img-like
        position: absolute;
        height :.4rem
        top:3.5rem
        right:.6rem
        img
           width :80%
       .img-title
        position: absolute;
        top:.53rem
        left:.3rem
        border-left :.2rem #9bcccb solid
        height :.57rem
        width :100%
        span
         padding-left :.2rem
         font-size:.36rem
         color:#ffffff
         font-weight :500
         float :left
         letter-spacing:.1rem

</style>